<template>
  <div class="institutions">
    <template v-if="this.$route.path == '/institutions'">
      <div class="main-title">机构列表</div>
      <div class="institutionss">
        <div class="init_top">
          <div class="container download">
            <div class="row downloadsEa">
              <div class="col col-xxl-10 col-xl-9 col-lg-12 col-md-12">
                <div class="init_top-l">
                  <search @searchOn="onSearch" @clearChange="clearChange" @changeEnter="changeEnter"></search>
                  <select-ect :optionStatus="optionStatus" @onChangeVal="onChangeVal" @clearList="clearList"></select-ect>
                </div>
              </div>
              <div class="col col-xxl-2 col-xl-3 col-lg-12 col-md-12">
                <div class="init_top-r">
                  <el-button @click="twoBtn('add')">新增</el-button>
                  <el-button @click="twoBtn('limit')" :disabled="newSmulti.length == 0">限制</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#f2f2f2', color: '#333', fontWeight: 600 }"
          @selection-change="handleSelectionChange"
          @select="selectChange"
          @select-all="selectAllChange"
        >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column label="机构名称" align="center" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="账号" align="center" show-overflow-tooltip>
            <template slot-scope="scope"> {{ scope.row.account == null ? '--' : scope.row.account }} </template>
          </el-table-column>
          <el-table-column label="联系人/手机号" align="center">
            <template slot-scope="scope"> {{ scope.row.phone == null ? '--' : scope.row.phone }} </template>
          </el-table-column>
          <el-table-column label="教师数量" align="center">
            <template slot-scope="scope"> {{ scope.row.teacherNum === null ? '--' : scope.row.teacherNum }} </template>
          </el-table-column>
          <el-table-column label="设备(台)" align="center">
            <template slot-scope="scope"> {{ scope.row.equipment === null ? '--' : scope.row.equipment }} </template>
          </el-table-column>
          <el-table-column label="学生数量" align="center">
            <template slot-scope="scope"> {{ scope.row.studentNum === null ? '--' : scope.row.studentNum }} </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span class="scope_span1">{{ scope.row.status === 1 ? '● 正常' : '' }}</span>
              <span class="scope_span2">{{ scope.row.status === 2 ? '● 限制' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createDate" label="创建日期" align="center">
            <template slot-scope="scope"> {{ scope.row.createDate === null ? '--' : scope.row.createDate }} </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="threeGeneral(scope.$index, scope.row, 'details')">详情</el-button>
              <el-button size="mini" type="text" :disabled="!newTableData.includes(scope.row)" @click="threeGeneral(scope.$index, scope.row, 'limit')">限制</el-button>
              <el-button size="mini" type="text" @click="threeGeneral(scope.$index, scope.row, 'resets')">重置</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </template>

    <router-view />
  </div>
</template>

<script>
import search from '../../components/search/search.vue'
import selectEct from '../../components/institutions/select.vue'
export default {
  components: { search, selectEct },
  data() {
    return {
      optionStatus: [
        {
          value: '正常',
          label: '正常'
        },
        {
          value: '限制',
          label: '限制'
        }
      ],
      tableData: [], //列表数据
      newTableData: [],
      currentPage: 1,
      pageSize: 0,
      total: 0,
      newSmulti: [], //表格选中默认置灰
      sou: {
        suoSou: '',
        zhuangTai: ''
      }
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        // console.log(val,oldVal);
        this.listPage() //返回页面后自动刷新
      },
      // 深度观察监听
      deep: true
    }
  },
  mounted() {
    var _this = this
    _this.listPage()
  },
  methods: {
    // 列表首页
    listPage() {
      this.$http.institutions.tutionList().then(result => {
        this.tableData = result.data
        this.pageSize = result.size
        this.total = result.total
        this.currentPage = result.currentPage
      })
    },
    // 下拉框选择
    onChangeVal(val) {
      if (val === '正常') {
        const newVal = (val = this.sou.zhuangTai = 1)
        this.currentPage = 1
        this.fenYesou(this.currentPage, this.sou.suoSou, newVal)
        // this.$http.institutions.tutionList({ status: newVal } ).then( res => {
        // 	this.tableData = res.data;
        // 	this.pageSize = res.size;
        // 	this.total = res.total;
        // 	this.currentPage = res.currentPage;
        // })
      }
      // else if( val === '全部状态') {
      // 	this.listPage();
      // }
      else {
        const newVal = (val = this.sou.zhuangTai = 2)
        this.currentPage = 1
        this.fenYesou(this.currentPage, this.sou.suoSou, newVal)
        // this.$http.institutions.tutionList({ status: newVal } ).then( res => {
        //   this.tableData = res.data;
        // 	this.pageSize = res.size;
        // 	this.total = res.total;
        // 	this.currentPage = res.currentPage;
        // })
      }
    },
    // 下拉框清除按钮
    clearList() {
      this.currentPage = 1
      this.sou.zhuangTai = ''
      this.fenYesou(this.currentPage, this.sou.suoSou, '')
    },
    // 搜索
    onSearch(data) {
      this.sou.suoSou = data
      this.currentPage = 1
      if (this.time) {
        clearTimeout(this.time)
      }
      this.time = setTimeout(async () => {
        await this.fenYesou(this.currentPage, data, this.sou.zhuangTai)
        // this.$http.institutions.tutionList({name: data} ).then( res => {
        //  this.tableData = res.data;
        // 	this.pageSize = res.size;
        // 	this.total = res.total;
        // 	this.currentPage = res.currentPage;
        // })
      }, 555)
    },
    // 点击搜索中的清楚案件触发  //	更显试图
    clearChange() {
      this.currentPage = 1
      console.log(this.sou.suoSou)
      this.fenYesou(this.currentPage, '', this.sou.zhuangTai)
    },
    // 搜索失去焦点或者按回车调用接口
    changeEnter(val) {
      this.sou.suoSou = val
      this.currentPage = 1
      this.time = setTimeout(async () => {
        await this.fenYesou(this.currentPage, val, this.sou.zhuangTai)
        // this.$http.institutions.tutionList({ name: val } ).then( res => {
        //  this.tableData = res.data;
        // 	this.pageSize = res.size;
        // 	this.total = res.total;
        // 	this.currentPage = res.currentPage;
        // })
      }, 555)
    },
    // 表格单选按钮
    selectChange(selection, row) {
      this.newTableData = selection
    },
    // 表格全选按钮
    selectAllChange(selection) {
      this.newTableData = selection
    },
    // 新增或者限制
    twoBtn(status) {
      if (status == 'add') {
        this.$router.push({ path: '/institutions/newAgency' })
        // this.$router.push({ path: '/content/details' })
      } else {
        this.$confirm('限制后本机构下所有教师账号和学生账号将被限制登录，确认要限制登录么？', '登录限制', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            const newValEts = []
            this.newTableData.filter(result => {
              newValEts.push(result.id)
            })
            this.$http.institutions.theLoerXian({ ide: newValEts.toString() }).then(res => {
              if (res == undefined) {
                this.$message({
                  type: 'success',
                  message: '当前机构下的所有账号将不可登录!'
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消限制'
            })
          })
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
      this.newSmulti = val
    },
    // 分页操作
    handleSizeChange(val) {
      this.currentPage = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(this.sou.zhuangTai, this.currentPage)
      // this.currentPage = 1;

      this.fenYesou(val, this.sou.suoSou, this.sou.zhuangTai)
    },
    // 分页搜索
    fenYesou(val, suoSou, zhuangTai) {
      this.$http.institutions.tutionList({ page: val, name: suoSou || '', status: zhuangTai || '' }).then(result => {
        this.tableData = result.data
        this.total = result.total
        this.currentPage = result.currentPage
      })
    },
    // 限制弹框操作
    threeGeneral(index, row, variable) {
      console.log(index, row, variable)
      if (variable == 'details') {
        //跳转详情页
        sessionStorage.setItem('userData', JSON.stringify(row))
        this.$router.push({ name: 'agency' })
      } else if (variable == 'limit') {
        //限制
        this.$confirm('限制后本机构下所有学生账号将被限制登录，确认要限制登录么', '登录限制', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$http.institutions.limitList({ id: row.id }).then(result => {
              this.listPage()
            })
            this.$message({
              type: 'success',
              message: '限制个人账号不可登录成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消限制'
            })
          })
      } else {
        //重置 resets
        this.$http.institutions.theLoerChongZhi({ id: row.id }).then(res => {
          if (res == undefined) {
            this.$notify({
              title: '重置机构密码，已恢复至默认',
              message: '默认密码为：000000',
              type: 'success'
            })
          }
        })
      }
    }
  }
}
</script>

<style scoped>
@import '../../assets/css/institutions/institutions.scss';
</style>
